<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>


  <script src="../js/vue.js"></script>
  <script>
    //1.没有块级作用域引起的问题,for的块级
    //为什么闭包可以解决问题:函数是一个作用域。
    //let/var
    //我们可以将let看成更完美的var

    const btns = document.getElementsByClassName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击');
      })
    }
    //1.情况一:ES5中没有使用闭包(错误的使用方式)
    i = 0;
    {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    //ES6中的let
    const btns = document.getElementsByClassName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击');
      })
    }
    {
      i = 0
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    {
      i = 1
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    {
      i = 2
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
    {
      i = 3
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击了');
      })
    }
  </script>
</body>

</html>